<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/vue.js"></script>
</head>
<body>

    <!--1.一个容器-->
    <div id="app">
        <!--2.使用全局组件-->
        <my-button></my-button>

        <my-button :my-title="title"></my-button>

        <my-button></my-button>

        <hr>
        {{title}}
    </div>
    <hr>
    <div id="app1">
            <my-button :my-title="title"></my-button>
    </div>

    <script>
        //1.定义全局组件
        Vue.component("MyButton",{
            template:`<div>
             <h1>{{title}} -- {{myTitle}}</h1>
            <button @click="clickFun">点我点我</button>
         </div>`,
            data(){//定义组件中的数据，必须使用函数定义  返回值必须是对象
               return {"title":"HelloWorld"};
            },
            methods:{
                clickFun(){
                    alert('hello');
                }
            },
            props:{//父组件通过属性传递到子组件中的数据
                myTitle:{
                    type:String
                }
            }

        }

            );

        var app = new Vue({
            el:"#app",//vue实现的挂载点  dom的id
            data:{
                title:"父组件总的数据"
            }
        });

        var app1 = new Vue({
            el:"#app1",//vue实现的挂载点  dom的id
            data:{
                title:"父组件总的数据 app1"
            }
        });


    </script>

</body>
</html>